<!--
 * @Author: your name
 * @Date: 2020-10-22 15:52:28
 * @LastEditTime: 2021-01-25 11:26:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\system\role\index.vue
-->
<template>
    <div class="role-mian-box">
        <div class="search-box">
            <div class="search-box-sub">
              <span class="lable-text">{{$t('role.roleName')}}</span>
              <el-input style="width:160px;" v-model="roleName" :placeholder="$t('common.info.pl-insert-content')"></el-input>
            </div>
            <div class="search-box-sub">
              <span class="lable-text">{{$t('role.enableFlag')}}</span>
              <el-select v-model="enableFlag" filterable :placeholder="$t('index.selectStates')" clearable>
                <el-option
                  v-for="item in statusList"
                  :key="item.id"
                  :label="item.text"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="search-box-sub">
              <el-button type="primary" @click='query' >{{$t('query')}}</el-button>
            </div>
        </div>
        <div class="button-box">
            <el-button type="primary" icon='el-icon-edit' class="marginR10" @click="()=>{$store.commit('setRoleVisible',true)}">{{$t('add')}}</el-button>
            <el-popconfirm
                    :confirm-button-text="$t('sure')"
                    :cancel-button-text="$t('cancel')"
                    :title="$t('promotionManagement.allDelete')"
                @confirm='deleteBatch()'
            >
                <el-button type="danger" slot="reference" icon='el-icon-delete' >{{$t('delete')}}</el-button>
            </el-popconfirm>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)"  :column='column' :select='true'>
            <template #roleType="{data}">
              {{returnRoleTypeCode(data.roleType)}}
            </template>
            <template #enableFlag="{data}">
              {{returnIsUseCode(data.enableFlag)}}
            </template>
            <template #option="{data}">
              <div class="option-box">
                <el-button size='small' type="primary" icon="el-icon-edit"  @click='editUsers(data)' class="marginR10"></el-button>
                <el-popconfirm
                        :confirm-button-text="$t('sure')"
                        :cancel-button-text="$t('cancel')"
                        :title="$t('index.delete_item_confirm')"
                    @confirm='deleteBatchSub(data.sid)'
                >
                    <el-button class="marginR10" type="danger" slot="reference" icon='el-icon-delete' ></el-button>
                </el-popconfirm>
                <el-tooltip class="item" effect="dark" :content="$t('role.js_allotMenu')" placement="top" :enterable='false' :open-delay='1000'>
                    <el-button size='small' type="success" icon="el-icon-thumb"     @click='showDrawer(data)'></el-button>
                </el-tooltip>
              </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <addModal :userCodeList='userCodeList.ROLE_CODE' @uploadPage='uploadPage' v-if='roleVisible'></addModal>
        <editModal :rowData='rowDataList' :userCodeList='userCodeList.ROLE_CODE' @uploadPage='uploadPage'></editModal>
        <el-drawer
        title="权限列表"
        :visible.sync="drawer"
        :with-header="false"
        size='18%'
        :wrapperClosable='false'
        >
            <h3 class='text-center'>{{$t('system-setting-menu')}}</h3>
            <hr>
            <drawer :allMenusList='allMenusList' v-if='drawer' :checkData='checkData' :roleId='roleId' @closeDrawer='closeDrawer' @uploadData='getRoleMenu' :userRoleSid='userRoleSid'></drawer>
        </el-drawer>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
import addModal from './add.vue'
import editModal from './edit.vue'
import drawer from './drawer'
export default {
    components: {
        baseTable,
        addModal,
        editModal,
        drawer
    },
    props: {

    },
    data() {
        return {
            statusList:[{
                id:'0',
                text: this.$t('version.versionService.forbidden')
            },{
                id:'1',
                text: this.$t('system-enable')
            }],
            roleTypeList:[],
            roleName:'',
            enableFlag:'',
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('role.roleNumber'),
                value: 'sid',
            },
            {
                title: this.$t('role.roleName'),
                value: 'roleName',
                slot: 'roleName'
            },
            {
                title: this.$t('role.roleType'),
                value: 'roleType',
                slot: 'roleType'
            },{
                title: this.$t('role.enableFlag'),
                value: 'enableFlag',
                slot: 'enableFlag'
            },{
                title: this.$t('createTime'),
                value: 'createTime',
                slot: 'createTime'
            },{
                title: this.$t('control'),
                value: 'userName',
                slot: 'option'
            }],
            size:10,
            current:1,
            total:1,
            userCodeList:[],
            rowDataList:{},
            selectDatalist:[],
            drawer:false,
            allMenusList:[],
            checkData:[],
            roleId:'',
            userRoleSid:{}
        };
    },
    computed: {
        roleVisible(){
            return this.$store.state.sysStore.roleVisible
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch()
        this.roleGetPage()
        this.getDictionaryBatchUser()
        this.getRoleMenuByParentId()
    },
    methods: {
        closeDrawer(){
            this.drawer = false
        },
        async getRoleMenuByParentId(){
            let res = await this.API.getRoleMenuByParentId({
                pid:0
            })
            this.allMenusList = res
            this.comMenus()
        },
        async getRoleMenuSub(pid){
            let res = await this.API.getRoleMenuByParentId({
                pid:pid
            })
            this.allMenusList.forEach(item => {
                if(item.sid == pid){
                    item['children']=[]
                    item['children']=[...res]
                }
            })
        },
        comMenus(){
            this.allMenusList.forEach( item=>{
                if(item.isLeaf !=1){
                    this.getRoleMenuSub(item.sid)
                }
            })
        },
        showDrawer(data){
            this.drawer = true
            this.roleId = data.sid
            this.getRoleMenu(data)
        },
        async getRoleMenu(data){
            let res = await this.API.getRoleMenu({
                roleId:data.sid
            })
            this.userRoleSid = data
            this.checkData = res
        },
        async deleteBatchSub(id){
            let res = await this.API.roleDeleteBatch({
                ids:id
            })
            if(res.success){
                this.$message({
                    message: this.$t('index.control_success'),
                    type: 'success'
                });
            }else{
                this.$message({
                    message: this.$t('index.control_fail'),
                    type: 'warning'
                });
            }
            this.roleGetPage()
        },
        async deleteBatch(){
            console.log(this.selectDatalist.length,'selectDatalist');
            if(this.selectDatalist.length == 0){
                this.comm.showMsg(false,this.$t('index.delete_select'))
                return
            }
            let ids = this.selectDatalist.map(item => {
                return item.sid
            })
            let res = await this.API.roleDeleteBatch({
                ids
            })
            if(res.success){
                this.$message({
                    message: this.$t('index.control_success'),
                    type: 'success'
                });
            }else{
                this.$message({
                    message: this.$t('index.control_fail'),
                    type: 'warning'
                });
            }
            this.roleGetPage()
        },
        editUsers(data){
            this.$store.commit('setRoleVisibleEdit',true)
            this.rowDataList = data
        },
        uploadPage(){
            this.roleGetPage()
        },
        async getDictionaryBatchUser(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'ROLE_CODE',
                lang:localStorage.getItem('lan')
            })
            this.userCodeList = res
        },
        returnRoleTypeCode(val){
            let name = ''
            this.roleTypeList.forEach(item => {
                if(item.value == val){
                    name = item.code
                }
            })
            return name
        },
        returnIsUseCode(val){
            let name = ''
            this.statusList.forEach(item => {
                if(item.id == val){
                    name = item.text
                }
            })
            return name
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'ROLE_TYPES',
                lang:localStorage.getItem('lan')
            })
            this.roleTypeList = res.ROLE_TYPES
        },
        async roleGetPage(){
            this.loading = true
            let res = await this.API.roleGetPage({
                enableFlag:this.enableFlag,
                roleName:this.roleName,
                size: this.size,
                current: this.current
            })
            this.dataRows = res.rows || []
            this.total = res.total
            this.loading = false
        },
        query(){
            this.current = 1
            this.roleGetPage()
        },
        handleSelectionChange(val){
            this.selectDatalist = val
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.roleGetPage()
        },
        handleCurrentChange(val) {
          this.current = val
          this.roleGetPage()
        },
    },
};
</script>

<style  lang="less" scoped>
.role-mian-box{
    font-size: 14px;
    .text-center{
        text-align: center;
    }
}
</style>
